import React, {useEffect} from 'react';
import {
    Alert, BackHandler,
    Dimensions,
    Image,
    SafeAreaView,
    TextInput,
    ToastAndroid,
    TouchableOpacity,
    TouchableWithoutFeedback,
    View
} from "react-native";
import { StyleSheet } from 'react-native';
import {
    Button,
    Card,
    Divider,
    Icon,
    Input,
    Layout, List,
    Tab,
    TabView,
    Text,
    TopNavigation,
    TopNavigationAction
} from '@ui-kitten/components';
import FatchManager from "../Compoments/FatchManager";
import SorageManager from "../Compoments/SorageManager";

const data = new Array(8).fill({
    title: 'Item',
});



export const FixEndScreen = ({ navigation }) => {

    const [trainInf, setTrainInf] = React.useState('');

    /**
     *  根据 所属段 和  车号 获取 机车信息
     * @param jrd
     * @param ch
     */
    const getPreparInfList=(jrd,ch)=>{

        const  url = 'http://htjoa.nrnet.cn/dc14/jwmis/preparInf/preparInf';
        const formData =new FormData();
        formData.append("jrd",jrd);
        formData.append("ch",ch);

        console.log(formData)
        FatchManager.get(url,formData,(json)=>{
            console.log(json)
        },(json)=>{
            setTrainInf(json)
            console.log(json)
        },(e)=>{
            console.log(e)
        })
    }



    useEffect(()=>{

        SorageManager.get('userInf').then(r =>{
            console.log(r,"userINF")
            getPreparInfList(r["belongduan"],value)
        } )

    },[])

    const navigateScpoeCheck = () => {
        navigation.navigate('ScpoeCheck');
    };



    const renderItemHeader = (headerProps, info) => (
        <View {...headerProps} style={{alignItems: 'center',margin:10}}>
            <Text category='h6' >
                车型： {info.item.cx}        车号： {info.item.ch}
            </Text>
        </View>
    );

    const renderItemFooter = (footerProps,info) => (
        <Layout style={{flexDirection:"row",alignItems: 'center', justifyContent:'space-evenly'
        }}>



            {/*<Button onPress={navigateAddTicketCollection} >*/}
            {/*    完 成*/}
            {/*</Button>*/}


            <Button  onPress={()=>{
                navigation.navigate('ScpoeCheck',{id:info.item.id});
            }} >
                范围检查
            </Button>



        </Layout>

    );

    const renderItem = (info) => (
        <Card
            style={styles.item}
            status='basic'
            header={headerProps => renderItemHeader(headerProps, info)}
            footer={footerProps =>renderItemFooter(footerProps,info)}>
            <Layout style={styles.textContainer}>
                <Layout style={styles.textItem}>
                    <Text>
                        股道:21
                    </Text>
                </Layout>

                <Layout style={styles.textItem}>
                    <Text>
                        类型:{info.item.lx}
                    </Text>
                </Layout>
            </Layout>


            <Layout style={styles.textContainer}>
                <Layout style={styles.textItem}>
                    <Text>
                        入段时间:{info.item.rdsj}
                    </Text>
                </Layout>
            </Layout>
            <Layout style={styles.textContainer}>
                <Layout style={styles.textItem}>
                    <Text>
                        入库时间: {info.item.rksj}
                    </Text>
                </Layout>

            </Layout>





        </Card>
    );


    const accept = (info) => (
        <Card
            style={styles.item}
            status='success'
            header={headerProps => renderItemHeader(headerProps, info)}
        >


            <Layout style={styles.textContainer}>
                <Layout style={styles.textItem}>
                    <Text>
                        股道:21
                    </Text>
                </Layout>
            </Layout>


            <Layout style={styles.textContainer}>
                <Layout style={styles.textItem}>
                    <Text>
                        入段时间 :{info.item.rdsj}
                    </Text>
                </Layout>
            </Layout>
            <Layout style={styles.textContainer}>
                <Layout style={styles.textItem}>
                    <Text>
                        入库时间 : {info.item.rksj}
                    </Text>
                </Layout>

                {/*<Layout style={styles.textItem}>*/}
                {/*    <Text>*/}
                {/*        范围:0*/}
                {/*    </Text>*/}
                {/*</Layout>*/}
                {/*<Layout style={styles.textItem}>*/}
                {/*    <Text>*/}
                {/*        动态:0*/}
                {/*    </Text>*/}
                {/*</Layout>*/}
            </Layout>

            <Layout style={styles.textContainer}>
                <Layout style={styles.textItem}>
                    <Text>
                        故障名称：
                    </Text>
                </Layout>
                <Layout style={styles.textItem}>
                    <Text>
                        A节车顶部弹簧弓铰链座缺油
                    </Text>
                </Layout>

                <Layout style={styles.textContainer}>
                    <Layout style={styles.textItem}>
                        <Text>
                            维修方式:打油
                        </Text>
                    </Layout>
                </Layout>

                <Layout style={styles.textItem}>
                    <Text>
                        未通过原因: 无
                    </Text>
                </Layout>

            </Layout>


        </Card>
    );



    const renderacceptFooter = (footerProps) => (
        <Button appearance='outline' status='warning' onPress={deleteButton}>
            取消
        </Button>
    );


    // const BackIcon = (props) => (
    //     <Icon {...props} name='arrow-back' />
    // );
    // const navigateBack = () => {
    //     navigation.goBack();
    // };
    // const BackAction = () => (
    //     <TopNavigationAction icon={BackIcon} onPress={navigateBack}/>
    // );

    const BackIcon = (props) => (
        <Icon {...props} name='arrow-back'/>
    );

    const navigateMenu = () => {
        navigation.navigate('Menu');
    };

    const BackAction = () => (
        <TopNavigationAction icon={BackIcon} onPress={navigateMenu}/>
    );

    const [selectedIndex, setSelectedIndex] = React.useState(0);
    const [value, setValue] = React.useState('');
    return (
        <View style={{ flex: 1 }}>
            <TopNavigation
                accessoryLeft={BackAction}

                title='范围检查' alignment='center' />
            <Divider/>
            <TabView
                selectedIndex={selectedIndex}
                onSelect={index => setSelectedIndex(index)}>
                <Tab >
                    <Layout style={styles.tabContainer}>


                        <View style={{flexDirection:'row',justifyContent: 'center',marginTop:10,marginBottom:10}}>

                            {/*<Input*/}
                            {/*    style={{width:360}}*/}
                            {/*    value={value}*/}
                            {/*    placeholder='机车号模糊查找'*/}
                            {/*    accessoryRight={(<Icon*/}
                            {/*        onPress={()=>{ ToastAndroid.show("取消查询", ToastAndroid.SHORT);}}*/}
                            {/*        style={styles.icon}*/}
                            {/*        fill='#8F9BB3'*/}
                            {/*        name='close-outline'*/}
                            {/*    />)}*/}
                            {/*    // secureTextEntry={secureTextEntry}*/}
                            {/*    onChangeText={nextValue => setValue(nextValue)}*/}
                            {/*/>*/}

                            {/*<Input*/}
                            {/*       placeholder='机车号'*/}
                            {/*       value={value}*/}
                            {/*       onChangeText={nextValue => setValue(nextValue)}>*/}
                            {/*</Input>*/}

                        </View>

                        <Divider/>
                        <List
                            style={styles.container}
                            contentContainerStyle={styles.contentContainer}
                            data={trainInf}
                            renderItem={renderItem}
                        />

                    </Layout>
                </Tab>
            </TabView>

        </View>
    );
};

const styles = StyleSheet.create({
    container: {

    },
    contentContainer: {
        paddingHorizontal: 15,
        // paddingVertical: 4,
    },
    item: {
        marginTop:15,
        // marginVertical: 4,

    },

    tabContainer: {
        height: Dimensions.get('window').height-100,
    },

    textContainer:{
        flexDirection:'row',
        flexWrap:'wrap',
        justifyContent:"space-evenly",
        alignItems:"center",
        marginBottom:10

    },
    textItem:{
        justifyContent:'center',
        alignItems:'center',

    }
});